<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        body{
            scroll-behavior: smooth;
        }
    </style> -->
</head>
<body>
    <!-- <img src="../tupian/李白.jpeg" title="我是图片" alt="裂开">
    <a href="https://www.taobao.com">淘宝</a> -->
   
    <h3 id="li">天空</h3>
    <a href="#li">点我到顶部</a>
    
    <!-- 两种页面内跳转到指定位置的方式，name id 都是用到了a标签的锚点，其中id对另一个标签没有任何要求，name属性则要求两个都是a标签 -->
    <a name="down">坑</a><br>
    <a href="#down">点我掉下去</a> 
    <!-- 文本格式化    -->
    正常的文字
    <!-- b:表示格式上加粗，是一种风格需求，只是一种物理行为，告诉浏览器该标签内的字体需要加粗 -->
    <!-- strong:带有感情色彩，是一种逻辑行为，强调标签内文本的重要性，某些盲人阅读器在识别到strong标签时，会加重读音和语气，而且seo，strong内的文字更容易被用户搜索到。 -->
    <b>加粗的文字</b>
    <strong>我也变粗了</strong>
    <!-- 
    类似b和strong标签
    i:表示单纯的意大利斜体
    em:带感
    -->
    <i>我歪了</i>
    <em>我也歪了</em>
    <del>我被删除了</del>
    <ins>我是添加的文字</ins>
    <p>我在中间
        <sub>我在下面</sub>
        <sup>我在上面</sup>
    </p>
    <!-- 
        显示模式
        block:块级元素;
        inline-block:行内块
        inline:内联
        行内元素:
    -->
    <!-- <span style="width:1000px">123</span>
    <div style="width:1000px;background-color:red;">123</div> -->
    
    <!-- 表单的基本结构 -->
    
    <form action="" method="">
        <!-- 用户名 -->
        <input type="text" name="username">
        <!-- 密码 -->
        <input type="password" name="pwd">
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
        <input type="password" 
        placeholder="请输入密码，不要超过3位数" 
        maxlength="3"
        >
        <input type="text"
        value="我是用户名"
        readonly>
        <!-- 数字框 -->
        <input type="number" min="1" max="100" step="10">
        <!-- 单选框 -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        <!-- 多选框 -->
        <input type="checkbox" name="hobby" value="lol">英雄联盟
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="睡觉">睡觉
        <input type="checkbox" name="hobby" value="喝水">喝水
        <!-- label标签 
        点击文字也能选中，提升用户体验-->
        <label><input type="radio" name="sex" value="male">男</label>
        <label><input type="radio" name="sex" value="female">女</label>
        <!-- 文件域-->
        <input type="file">
        <!-- 按钮
        
        sumbmit 提交：将表单中的数据发送给后台
        reset 重置：清空所有数据。恢复默认状态
        button 普通按钮：需要用户通过js定义功能
        -->
    
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">
    </form>



</body>
</html>